<!DOCTYPE html><html><head>
      <title>index</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css">
      
      
      
      
      
      
      
      
      
      <style>
      /**
 * prism.js Github theme based on GitHub's theme.
 * @author Sam Clarke
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #333;
  background: none;
  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;

  -moz-tab-size: 8;
  -o-tab-size: 8;
  tab-size: 8;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: .8em;
  overflow: auto;
  /* border: 1px solid #ddd; */
  border-radius: 3px;
  /* background: #fff; */
  background: #f5f5f5;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
  background: #f5f5f5;
}

.token.comment,
.token.blockquote {
  color: #969896;
}

.token.cdata {
  color: #183691;
}

.token.doctype,
.token.punctuation,
.token.variable,
.token.macro.property {
  color: #333;
}

.token.operator,
.token.important,
.token.keyword,
.token.rule,
.token.builtin {
  color: #a71d5d;
}

.token.string,
.token.url,
.token.regex,
.token.attr-value {
  color: #183691;
}

.token.property,
.token.number,
.token.boolean,
.token.entity,
.token.atrule,
.token.constant,
.token.symbol,
.token.command,
.token.code {
  color: #0086b3;
}

.token.tag,
.token.selector,
.token.prolog {
  color: #63a35c;
}

.token.function,
.token.namespace,
.token.pseudo-element,
.token.class,
.token.class-name,
.token.pseudo-class,
.token.id,
.token.url-reference .token.variable,
.token.attr-name {
  color: #795da3;
}

.token.entity {
  cursor: help;
}

.token.title,
.token.title .token.punctuation {
  font-weight: bold;
  color: #1d3e81;
}

.token.list {
  color: #ed6a43;
}

.token.inserted {
  background-color: #eaffea;
  color: #55a532;
}

.token.deleted {
  background-color: #ffecec;
  color: #bd2c00;
}

.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}


/* JSON */
.language-json .token.property {
  color: #183691;
}

.language-markup .token.tag .token.punctuation {
  color: #333;
}

/* CSS */
code.language-css,
.language-css .token.function {
  color: #0086b3;
}

/* YAML */
.language-yaml .token.atrule {
  color: #63a35c;
}

code.language-yaml {
  color: #183691;
}

/* Ruby */
.language-ruby .token.function {
  color: #333;
}

/* Markdown */
.language-markdown .token.url {
  color: #795da3;
}

/* Makefile */
.language-makefile .token.symbol {
  color: #795da3;
}

.language-makefile .token.variable {
  color: #183691;
}

.language-makefile .token.builtin {
  color: #0086b3;
}

/* Bash */
.language-bash .token.keyword {
  color: #0086b3;
}

/* highlight */
pre[data-line] {
  position: relative;
  padding: 1em 0 1em 3em;
}
pre[data-line] .line-highlight-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
  display: block;
  width: 100%;
}

pre[data-line] .line-highlight {
  position: absolute;
  left: 0;
  right: 0;
  padding: inherit 0;
  margin-top: 1em;
  background: hsla(24, 20%, 50%,.08);
  background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  pointer-events: none;
  line-height: inherit;
  white-space: pre;
}

pre[data-line] .line-highlight:before, 
pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-start);
  position: absolute;
  top: .4em;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  background-color: hsla(24, 20%, 50%,.4);
  color: hsl(24, 20%, 95%);
  font: bold 65%/1.5 sans-serif;
  text-align: center;
  vertical-align: .3em;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 1px white;
}

pre[data-line] .line-highlight[data-end]:after {
  content: attr(data-end);
  top: auto;
  bottom: .4em;
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% -  300px);padding:2em calc(50% - 457px -  150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
    </head>
    <body for="html-export">
      <div class="mume markdown-preview  ">
      <blockquote>
<p>&#x6CE8;&#xFF1A;&#x672C;&#x7B14;&#x8BB0;&#x4E2D;&#xFF0C;&#x4F7F;&#x7528;p<sub>x.y</sub>&#x7684;&#x5F62;&#x5F0F;&#x8868;&#x793A;&#x9875;&#x7801;&#xFF08;page&#xFF09;&#x3002;&#x4F8B;&#x5982;p<sub>2.34</sub>&#xFF0C;&#x8868;&#x793A;&#x7B2C;2.34&#x9875;&#x3002;</p>
</blockquote>
<h2 class="mume-header" id="%E8%83%8C%E6%99%AF-background">&#x80CC;&#x666F; background</h2>

<blockquote>
<p>&#x8BFE;&#x672C; p<sub>2.19</sub></p>
</blockquote>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders#css%E7%9A%84%E8%83%8C%E6%99%AF%E6%A0%B7%E5%BC%8F">CSS&#x7684;&#x80CC;&#x666F;&#x6837;&#x5F0F;</a></p>
<ol>
<li>&#x80CC;&#x666F;&#x989C;&#x8272;<br>
background-color&#x5C5E;&#x6027;&#x5B9A;&#x4E49;&#x4E86;CSS&#x4E2D;&#x4EFB;&#x4F55;&#x5143;&#x7D20;&#x7684;&#x80CC;&#x666F;&#x989C;&#x8272;&#x3002;&#x5C5E;&#x6027;&#x63A5;&#x53D7;&#x4EFB;&#x4F55;&#x6709;&#x6548;&#x7684;<color>&#x503C;&#x3002;&#x80CC;&#x666F;&#x8272;&#x6269;&#x5C55;&#x5230; &#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x548C;&#x5185;&#x8FB9;&#x8DDD;&#x7684;&#x4E0B;&#x9762;&#x3002;<br>
CSS&#x5C5E;&#x6027;&#x4E2D;&#x7684; background-color &#x4F1A;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x80CC;&#x666F;&#x8272;, &#x5C5E;&#x6027;&#x7684;&#x503C;&#x4E3A;&#x989C;&#x8272;&#x503C;&#x6216;&#x5173;&#x952E;&#x5B57;&quot;transparent&quot;&#x4E8C;&#x8005;&#x9009;&#x5176;&#x4E00;.<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#567895</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">h2</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">black</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">span</span> <span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color"><span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">255</span><span class="token punctuation">,</span><span class="token number">255</span><span class="token punctuation">,</span><span class="token number">255</span><span class="token punctuation">,</span><span class="token number">.5</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>Background Colors<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Try changing the background <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>colors<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="./background/background-color.png" alt="background-color"></color></li>
<li>&#x80CC;&#x666F;&#x56FE;&#x7247;<br>
background-image&#x5C5E;&#x6027;&#x5141;&#x8BB8;&#x5728;&#x5143;&#x7D20;&#x7684;&#x80CC;&#x666F;&#x4E2D;&#x663E;&#x793A;&#x56FE;&#x50CF;&#x3002;<br>
CSS&#x5C5E;&#x6027;&#x4E2D;&#x7684; background-color &#x4F1A;&#x8BBE;&#x7F6E;&#x5143;&#x7D20;&#x7684;&#x80CC;&#x666F;&#x8272;, &#x5C5E;&#x6027;&#x7684;&#x503C;&#x4E3A;&#x989C;&#x8272;&#x503C;&#x6216;&#x5173;&#x952E;&#x5B57;&quot;transparent&quot;&#x4E8C;&#x8005;&#x9009;&#x5176;&#x4E00;.<br>
CSS &#x6570;&#x636E;&#x7C7B;&#x578B; <url> &#x6307;&#x5411;&#x4E00;&#x4E2A;&#x8D44;&#x6E90;&#x3002;&#x5B83;&#x6CA1;&#x6709;&#x72EC;&#x6709;&#x7684;&#x8868;&#x8FBE;&#x5F62;&#x5F0F;&#xFF0C;&#x53EA;&#x80FD;&#x901A;&#x8FC7; url() &#x51FD;&#x6570;&#x5B9A;&#x4E49;&#x3002;<br>
&#x5728;&#x4E0B;&#x9762;&#x7684;&#x4F8B;&#x5B50;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x6709;&#x4E24;&#x4E2A;&#x65B9;&#x6846;&#x2014;&#x2014;&#x4E00;&#x4E2A;&#x662F;&#x6BD4;&#x65B9;&#x6846;&#x5927;&#x7684;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#xFF0C;&#x53E6;&#x4E00;&#x4E2A;&#x662F;&#x661F;&#x661F;&#x7684;&#x5C0F;&#x56FE;&#x50CF;&#x3002;<br>
&#x8FD9;&#x4E2A;&#x4F8B;&#x5B50;&#x6F14;&#x793A;&#x4E86;&#x5173;&#x4E8E;&#x80CC;&#x666F;&#x56FE;&#x50CF;&#x7684;&#x4E24;&#x79CD;&#x60C5;&#x5F62;&#x3002;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5927;&#x56FE;&#x4E0D;&#x4F1A;&#x7F29;&#x5C0F;&#x4EE5;&#x9002;&#x5E94;&#x65B9;&#x6846;&#xFF0C;&#x56E0;&#x6B64;&#x6211;&#x4EEC;&#x53EA;&#x80FD;&#x770B;&#x5230;&#x5B83;&#x7684; &#x4E00;&#x4E2A;&#x5C0F;&#x89D2;&#xFF0C;&#x800C;&#x5C0F;&#x56FE;&#x5219;&#x662F;&#x5E73;&#x94FA;&#x4EE5;&#x586B;&#x5145;&#x65B9;&#x6846;&#x3002;&#x5728;&#x8FD9;&#x79CD;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5B9E;&#x9645;&#x7684;&#x56FE;&#x50CF;&#x53EA;&#x662F;&#x5355;&#x72EC;&#x7684;&#x4E00;&#x9897;&#x661F;&#x661F;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token class">.a</span></span> <span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>balloons.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.b</span></span> <span class="token punctuation">{</span>
<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>star.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box a<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box b<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="./background/background-image.png" alt="background-image"></url></li>
<li>&#x63A7;&#x5236;&#x80CC;&#x666F;&#x5E73;&#x94FA;<br>
background-repeat&#x5C5E;&#x6027;&#x7528;&#x4E8E;&#x63A7;&#x5236;&#x56FE;&#x50CF;&#x7684;&#x5E73;&#x94FA;&#x884C;&#x4E3A;&#x3002;&#x53EF;&#x7528;&#x7684;&#x503C;&#x662F;:
<ul>
<li>no-repeat &#x2014; &#x4E0D;&#x91CD;&#x590D;&#x3002;</li>
<li>repeat-x &#x2014;&#x6C34;&#x5E73;&#x91CD;&#x590D;&#x3002;</li>
<li>repeat-y &#x2014;&#x5782;&#x76F4;&#x91CD;&#x590D;&#x3002;</li>
<li>repeat &#x2014; &#x5728;&#x4E24;&#x4E2A;&#x65B9;&#x5411;&#x91CD;&#x590D;&#x3002;</li>
</ul>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>star.png<span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="./background/background-repeat.png" alt="background-color"></li>
<li>&#x4F7F;&#x7528;background &#x7684;&#x7B80;&#x5199;<br>
background &#x662F;&#x4E00;&#x79CD; CSS &#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x4E8E;&#x4E00;&#x6B21;&#x6027;&#x96C6;&#x4E2D;&#x5B9A;&#x4E49;&#x5404;&#x79CD;&#x80CC;&#x666F;&#x5C5E;&#x6027;&#xFF0C;&#x5305;&#x62EC; color, image, origin &#x4E0E; size, repeat &#x65B9;&#x5F0F;&#x7B49;&#x7B49;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span>   
     <span class="token color">orange</span> repeat <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">&apos;big-star.png&apos;</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="./background/background.png" alt="background"></li>
</ol>
<hr>
<h2 class="mume-header" id="%E5%88%86%E7%BB%84%E5%92%8C%E5%B5%8C%E5%A5%97">&#x5206;&#x7EC4;&#x548C;&#x5D4C;&#x5957;</h2>

<blockquote>
<p>&#x8BFE;&#x672C; p<sub>2.20</sub></p>
</blockquote>
<h3 class="mume-header" id="%E5%88%86%E7%BB%84">&#x5206;&#x7EC4;</h3>

<blockquote>
<p>&#x8BFE;&#x672C; p<sub>2.22</sub></p>
</blockquote>
<ol>
<li><a href="%5B%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%97%E8%A1%A8%5D(https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%97%E8%A1%A8)">&#x9009;&#x62E9;&#x5668;&#x5217;&#x8868;</a><br>
&#x5982;&#x679C;&#x4F60;&#x6709;&#x591A;&#x4E2A;&#x4F7F;&#x7528;&#x76F8;&#x540C;&#x6837;&#x5F0F;&#x7684;CSS&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x4E9B;&#x5355;&#x72EC;&#x7684;&#x9009;&#x62E9;&#x5668;&#x53EF;&#x4EE5;&#x88AB;&#x6DF7;&#x7F16;&#x4E3A;&#x4E00;&#x4E2A;&#x201C;&#x9009;&#x62E9;&#x5668;&#x5217;&#x8868;&#x201D;&#xFF0C;&#x8FD9;&#x6837;&#xFF0C;&#x89C4;&#x5219;&#x5C31;&#x53EF;&#x4EE5;&#x5E94;&#x7528;&#x5230;&#x6240;&#x6709;&#x7684;&#x5355;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x4E0A;&#x4E86;&#x3002;&#x4F8B;&#x5982;&#xFF0C;&#x5982;&#x679C;&#x6211;&#x7684;h1&#x548C;.special&#x7C7B;&#x6709;&#x76F8;&#x540C;&#x7684;CSS&#xFF0C;&#x90A3;&#x4E48;&#x6211;&#x53EF;&#x4EE5;&#x628A;&#x5B83;&#x4EEC;&#x5199;&#x6210;&#x4E24;&#x4E2A;&#x5206;&#x5F00;&#x7684;&#x89C4;&#x5219;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token comment">/*
h1 {
  color: blue;
}
.special {
  color: blue;
}
 */</span>
<span class="token selector">h1<span class="token punctuation">,</span> <span class="token class">.special</span></span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span> Not until we are lost do we begin to understandourselves<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>special<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    Life is filled with regrets. Ask anyone around you what their   regrets are     and they usually have no difficulty
    coming up with many items on their &#x201C;regret list.&#x201D; And for some  reason our  twenties are ripe for a field of
    regrets.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
    Youth, revealed a deep a quality suggestive of poetry or    painting; youth,    emitting a faint fragrance lovingly.
    The pace of youth will not stop because of difficulty, the  melody of youth     is not obstructed by wind and rain
    and. Youth is the sun, is a sign of confidence; let us raise    the youth   sailing, let youth where flying, let
    youth in here!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
</pre><img src="./group_nest/group.png" alt="selector-list"></li>
</ol>
<h3 class="mume-header" id="%E5%B5%8C%E5%85%A5">&#x5D4C;&#x5165;</h3>

<blockquote>
<p>&#x8BFE;&#x672C; p<sub>2.24</sub></p>
</blockquote>
<ol>
<li>
<h4>&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;</h4>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8">&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;</a><br>
&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#x2014;&#x2014;&#x5178;&#x578B;&#x7528;&#x5355;&#x4E2A;&#x7A7A;&#x683C;<kbd> </kbd>&#x5B57;&#x7B26;&#x2014;&#x2014;&#x7EC4;&#x5408;&#x4E24;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#xFF0C;&#x6BD4;&#x5982;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x5339;&#x914D;&#x7684;&#x5143;&#x7D20;&#x88AB;&#x9009;&#x62E9;&#xFF0C;&#x5982;&#x679C;&#x4ED6;&#x4EEC;&#x6709;&#x4E00;&#x4E2A;&#x7956;&#x5148;&#xFF08;&#x7236;&#x4EB2;&#xFF0C;&#x7236;&#x4EB2;&#x7684;&#x7236;&#x4EB2;&#xFF0C;&#x7236;&#x4EB2;&#x7684;&#x7236;&#x4EB2;&#x7684;&#x7236;&#x4EB2;&#xFF0C;&#x7B49;&#x7B49;&#xFF09;&#x5143;&#x7D20;&#x5339;&#x914D;&#x7B2C;&#x4E00;&#x4E2A;&#x9009;&#x62E9;&#x5668;&#x3002;&#x9009;&#x62E9;&#x5668;&#x5229;&#x7528;&#x540E;&#x4EE3;&#x7EC4;&#x5408;&#x7B26;&#x88AB;&#x79F0;&#x4F5C;&#x540E;&#x4EE3;&#x9009;&#x62E9;&#x5668;&#x3002;</p>
<p>&#x4E0B;&#x9762;&#x7684;&#x793A;&#x4F8B;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x53EA;&#x4F1A;&#x5339;&#x914D;&#x5904;&#x4E8E;&#x5E26;&#x6709;.box&#x7C7B;&#x7684;&#x5143;&#x7D20;&#x91CC;&#x9762;&#x7684;</p><div>&#x5143;&#x7D20;&#x3002;<p></p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector"><span class="token class">.box</span> div</span> <span class="token punctuation">{</span>
    <span class="token comment">/* &#x8FD9;&#x91CC;&#x8981;&#x6CE8;&#x610F;&#xFF0C;color&#x6837;&#x5F0F;&#x53EF;&#x4EE5;&#x88AB;&#x5B50;&#x5143;&#x7D20;&#x9ED8;&#x8BA4;&#x7EE7;&#x627F;&#x3002;&#x8BF7;&#x5FFD;&#x7565;&#x6B64;&#x6837;&#x5F0F;&#x3002; */</span>
    <span class="token comment">/* color: red; */</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span> solid <span class="token color">red</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Text in .box p<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        Text in .box div
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
            Text in .box div div
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    Text not in .box
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><p><img src="./group_nest/descendant.png" alt="Descendant combinator"></p>
</div></li>
<li>
<h4>&#x5B50;&#x4EE3;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x5668;</h4>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%E5%AD%90%E4%BB%A3%E5%85%B3%E7%B3%BB%E9%80%89%E6%8B%A9%E5%99%A8">&#x5B50;&#x4EE3;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x5668;</a><br>
&#x5B50;&#x4EE3;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x5668;&#x662F;&#x4E2A;&#x5927;&#x4E8E;&#x53F7;&#xFF08;<code>&gt;</code>&#xFF09;&#xFF0C;&#x53EA;&#x4F1A;&#x5728;&#x9009;&#x62E9;&#x5668;&#x9009;&#x4E2D;&#x76F4;&#x63A5;&#x5B50;&#x5143;&#x7D20;&#x7684;&#x65F6;&#x5019;&#x5339;&#x914D;&#x3002;&#x7EE7;&#x627F;&#x5173;&#x7CFB;&#x4E0A;&#x66F4;&#x8FDC;&#x7684;&#x540E;&#x4EE3;&#x5219;&#x4E0D;&#x4F1A;&#x5339;&#x914D;&#x3002;&#x4F8B;&#x5982;&#xFF0C;&#x53EA;&#x9009;&#x4E2D;&#x4F5C;&#x4E3A;<code>&lt;article&gt;</code>&#x7684;&#x76F4;&#x63A5;&#x5B50;&#x5143;&#x7D20;&#x7684;<code>&lt;p&gt;</code>&#x5143;&#x7D20;&#xFF1A;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">ul <span class="token combinator">&gt;</span> li</span> <span class="token punctuation">{</span>
    <span class="token comment">/* &#x6709;&#x4E2A;&#x4F8B;&#x5916;&#xFF0C;&#x5BF9;&#x4E8E;&#x53EF;&#x7EE7;&#x627F;&#x6837;&#x5F0F;&#xFF0C;&#x7531;&#x4E8E;&#x4F1A;&#x81EA;&#x52A8;&#x88AB;&#x5B50;&#x5143;&#x7D20;&#x7EE7;&#x627F;&#xFF0C;&#x6240;&#x4EE5;&#x7B26;&#x5408;&#x5F53;&#x524D;&#x573A;&#x666F;&#x3002; */</span>
    <span class="token comment">/* color: red; */</span>
    <span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">5</span><span class="token unit">px</span> solid <span class="token color">red</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> 
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Unordered item<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Unordered item
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ol</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Item 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ol</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</pre><p><img src="./group_nest/child.png" alt="Child combinator"></p>
</li>
<li>
<h4>&#x90BB;&#x63A5;&#x5144;&#x5F1F;</h4>
<p>[&#x90BB;&#x63A5;&#x5144;&#x5F1F;](<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/">https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/</a>  Selectors/    Combinators#%E5%AD%90%E4%BB%A3%E5%85%B3%E7%B3%BB%E9%80%89%E6%8B%A9%E5%99%A8)<br>
&#x90BB;&#x63A5;&#x5144;&#x5F1F;&#x9009;&#x62E9;&#x5668;&#xFF08;<code>+</code>&#xFF09;&#x7528;&#x6765;&#x9009;&#x4E2D;&#x6070;&#x597D;&#x5904;&#x4E8E;&#x53E6;&#x4E00;&#x4E2A;&#x5728;&#x7EE7;&#x627F;&#x5173;&#x7CFB;&#x4E0A;&#x540C;&#x7EA7;&#x7684;&#x5143;&#x7D20;&#x65C1;&#x8FB9;&#x7684;&#x7269;&#x4EF6;&#x3002;<br>
&#x5E38;&#x89C1;&#x7684;&#x4F7F;&#x7528;&#x573A;&#x666F;&#x662F;&#xFF0C; &#x6539;&#x53D8;&#x7D27;&#x8DDF;&#x7740;&#x4E00;&#x4E2A;&#x6807;&#x9898;&#x7684;&#x6BB5;&#x7684;&#x67D0;&#x4E9B;&#x8868;&#x73B0;&#x65B9;&#x9762;&#xFF0C;&#x5C31;&#x50CF;&#x662F;&#x6211;&#x4E0B;&#x9762;&#x7684;&#x793A;&#x4F8B;&#x90A3;&#x6837;&#x3002;&#x8FD9;&#x91CC;&#x6211;&#x4EEC;   &#x5BFB;&#x627E;&#x4E00;&#x4E2A;&#x7D27;&#x6328;<code>&lt;h1&gt;</code>&#x7684;&#x6BB5;&#xFF0C;&#x7136;&#x540E;&#x6837;&#x5F0F;&#x5316;&#x5B83;&#x3002;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">h1 <span class="token combinator">+</span> p</span> <span class="token punctuation">{</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#333</span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#fff</span><span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">.5</span><span class="token unit">em</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>   
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>A heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh   onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette    tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.      Dandelion cucumber earthnut pea peanut soko zucchini.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
</pre><p><img src="./group_nest/adjancent_sibling.png" alt="Adjacent sibling combinator"></p>
</li>
<li>
<h4>&#x901A;&#x7528;&#x5144;&#x5F1F;</h4>
<p>[&#x901A;&#x7528;&#x5144;&#x5F1F;](<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/">https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/</a>  Selectors/Combinators#%E9%80%9A%E7%94%A8%E5%85%84%E5%BC%9F)<br>
&#x5982;&#x679C;&#x4F60;&#x60F3;&#x9009;&#x4E2D;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x7684;&#x5144;&#x5F1F;&#x5143;&#x7D20;&#xFF0C;&#x5373;&#x4F7F;&#x5B83;&#x4EEC;&#x4E0D;&#x76F4;&#x63A5;&#x76F8;&#x90BB;&#xFF0C;&#x4F60;&#x8FD8;&#x662F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x901A;&#x7528;&#x5144;&#x5F1F;&#x5173;&#x7CFB;&#x9009;&#x62E9;&#x5668;    &#xFF08;<code>~</code>&#xFF09;&#x3002;</p>
<pre data-role="codeBlock" data-info="css" class="language-css"><span class="token selector">h1 <span class="token combinator">~</span> p</span> <span class="token punctuation">{</span>
    <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode color">#333</span><span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode color">#fff</span><span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">.5</span><span class="token unit">em</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>  
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>article</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>A heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>I am a paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>I am a div<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>I am another paragraph.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>article</span><span class="token punctuation">&gt;</span></span>
</pre><p><img src="./group_nest/general_sibling.png" alt="Adjacent sibling combinator"></p>
</li>
</ol>
<hr>
<h3 class="mume-header" id="%E5%AE%9A%E4%BD%8D">&#x5B9A;&#x4F4D;</h3>

<blockquote>
<p>&#x8BFE;&#x672C; p<sub>2.27</sub></p>
</blockquote>
<p>&#x5B9A;&#x4F4D;&#x5141;&#x8BB8;&#x60A8;&#x4ECE;&#x6B63;&#x5E38;&#x7684;&#x6587;&#x6863;&#x6D41;&#x5E03;&#x5C40;&#x4E2D;&#x53D6;&#x51FA;&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x4F7F;&#x5B83;&#x4EEC;&#x5177;&#x6709;&#x4E0D;&#x540C;&#x7684;&#x884C;&#x4E3A;&#xFF0C;&#x4F8B;&#x5982;&#x653E;&#x5728;&#x53E6;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x7684;&#x4E0A;&#x9762;&#xFF0C;&#x6216;&#x8005;&#x59CB;&#x7EC8;&#x4FDD;&#x6301;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x89C6;&#x7A97;&#x5185;&#x7684;&#x540C;&#x4E00;&#x4F4D;&#x7F6E;&#x3002;</p>
<h5 class="mume-header" id="%E6%96%87%E6%A1%A3%E6%B5%81">&#x6587;&#x6863;&#x6D41;</h5>

<p>&#x5B9A;&#x4F4D;&#x662F;&#x4E00;&#x4E2A;&#x76F8;&#x5F53;&#x590D;&#x6742;&#x7684;&#x8BDD;&#x9898;&#xFF0C;&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x6DF1;&#x5165;&#x4E86;&#x89E3;&#x4EE3;&#x7801;&#x4E4B;&#x524D;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x5BA1;&#x89C6;&#x4E00;&#x4E0B;&#x5E03;&#x5C40;&#x7406;&#x8BBA;&#xFF0C;&#x5E76;&#x8BA9;&#x6211;&#x4EEC;&#x4E86;&#x89E3;&#x5B83;&#x7684;&#x5DE5;&#x4F5C;&#x539F;&#x7406;&#x3002;<br>
&#x9996;&#x5148;&#xFF0C;&#x56F4;&#x7ED5;&#x5143;&#x7D20;&#x5185;&#x5BB9;&#x6DFB;&#x52A0;&#x4EFB;&#x4F55;&#x5185;&#x8FB9;&#x8DDD;&#x3001;&#x8FB9;&#x754C;&#x548C;&#x5916;&#x8FB9;&#x8DDD;&#x6765;&#x5E03;&#x7F6E;&#x5355;&#x4E2A;&#x5143;&#x7D20;&#x76D2;&#x5B50;&#x2014;&#x2014;&#x8FD9;&#x5C31;&#x662F; &#x76D2;&#x6A21;&#x578B; &#xFF0C;&#x6211;&#x4EEC;&#x524D;&#x9762;&#x770B;&#x8FC7;&#x3002; &#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x5BBD;&#x5EA6;&#x662F;&#x5176;&#x7236;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x5EA6;&#x7684;100&#xFF05;&#xFF0C;&#x5E76;&#x4E14;&#x4E0E;&#x5176;&#x5185;&#x5BB9;&#x4E00;&#x6837;&#x9AD8;&#x3002;&#x5185;&#x8054;&#x5143;&#x7D20;&#x9AD8;&#x5BBD;&#x4E0E;&#x4ED6;&#x4EEC;&#x7684;&#x5185;&#x5BB9;&#x9AD8;&#x5BBD;&#x4E00;&#x6837;&#x3002;&#x60A8;&#x4E0D;&#x80FD;&#x5BF9;&#x5185;&#x8054;&#x5143;&#x7D20;&#x8BBE;&#x7F6E;&#x5BBD;&#x5EA6;&#x6216;&#x9AD8;&#x5EA6;&#x2014;&#x2014;&#x5B83;&#x4EEC;&#x53EA;&#x662F;&#x4F4D;&#x4E8E;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5185;&#x5BB9;&#x4E2D;&#x3002; &#x5982;&#x679C;&#x8981;&#x4EE5;&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x63A7;&#x5236;&#x5185;&#x8054;&#x5143;&#x7D20;&#x7684;&#x5927;&#x5C0F;&#xFF0C;&#x5219;&#x9700;&#x8981;&#x5C06;&#x5176;&#x8BBE;&#x7F6E;&#x4E3A;&#x7C7B;&#x4F3C;&#x5757;&#x7EA7;&#x5143;&#x7D20; display: block;&#x3002;<br>
&#x8FD9;&#x53EA;&#x662F;&#x89E3;&#x91CA;&#x4E86;&#x5355;&#x4E2A;&#x5143;&#x7D20;&#xFF0C;&#x4F46;&#x662F;&#x5143;&#x7D20;&#x76F8;&#x4E92;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x4EA4;&#x4E92;&#x5462;&#xFF1F; &#x6B63;&#x5E38;&#x7684;&#x5E03;&#x5C40;&#x6D41;&#xFF08;&#x5728;&#x5E03;&#x5C40;&#x4ECB;&#x7ECD;&#x6587;&#x7AE0;&#x4E2D;&#x63D0;&#x5230;&#xFF09;&#x662F;&#x5C06;&#x5143;&#x7D20;&#x653E;&#x7F6E;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x89C6;&#x53E3;&#x5185;&#x7684;&#x7CFB;&#x7EDF;&#x3002;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x5728;&#x89C6;&#x53E3;&#x4E2D;&#x5782;&#x76F4;&#x5E03;&#x5C40;&#x2014;&#x2014;&#x6BCF;&#x4E2A;&#x90FD;&#x5C06;&#x663E;&#x793A;&#x5728;&#x4E0A;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x4E0B;&#x9762;&#x7684;&#x65B0;&#x884C;&#x4E0A;&#xFF0C;&#x5E76;&#x4E14;&#x5B83;&#x4EEC;&#x7684;&#x5916;&#x8FB9;&#x8DDD;&#x5C06;&#x5206;&#x9694;&#x5F00;&#x5B83;&#x4EEC;&#x3002;<br>
&#x5185;&#x8054;&#x5143;&#x7D20;&#x8868;&#x73B0;&#x4E0D;&#x4E00;&#x6837;&#x2014;&#x2014;&#x5B83;&#x4EEC;&#x4E0D;&#x4F1A;&#x51FA;&#x73B0;&#x5728;&#x65B0;&#x884C;&#x4E0A;&#xFF1B;&#x76F8;&#x53CD;&#xFF0C;&#x5B83;&#x4EEC;&#x4E92;&#x76F8;&#x4E4B;&#x95F4;&#x4EE5;&#x53CA;&#x4EFB;&#x4F55;&#x76F8;&#x90BB;&#xFF08;&#x6216;&#x88AB;&#x5305;&#x88F9;&#xFF09;&#x7684;&#x6587;&#x672C;&#x5185;&#x5BB9;&#x4F4D;&#x4E8E;&#x540C;&#x4E00;&#x884C;&#x4E0A;&#xFF0C;&#x53EA;&#x8981;&#x5728;&#x7236;&#x5757;&#x7EA7;&#x5143;&#x7D20;&#x7684;&#x5BBD;&#x5EA6;&#x5185;&#x6709;&#x7A7A;&#x95F4;&#x53EF;&#x4EE5;&#x8FD9;&#x6837;&#x505A;&#x3002;&#x5982;&#x679C;&#x6CA1;&#x6709;&#x7A7A;&#x95F4;&#xFF0C;&#x90A3;&#x4E48;&#x6EA2;&#x6D41;&#x7684;&#x6587;&#x672C;&#x6216;&#x5143;&#x7D20;&#x5C06;&#x5411;&#x4E0B;&#x79FB;&#x52A8;&#x5230;&#x65B0;&#x884C;&#x3002;<br>
&#x5982;&#x679C;&#x4E24;&#x4E2A;&#x76F8;&#x90BB;&#x5143;&#x7D20;&#x90FD;&#x5728;&#x5176;&#x4E0A;&#x8BBE;&#x7F6E;&#x5916;&#x8FB9;&#x8DDD;&#xFF0C;&#x5E76;&#x4E14;&#x4E24;&#x4E2A;&#x5916;&#x8FB9;&#x8DDD;&#x63A5;&#x89E6;&#xFF0C;&#x5219;&#x4E24;&#x4E2A;&#x5916;&#x8FB9;&#x8DDD;&#x4E2D;&#x7684;&#x8F83;&#x5927;&#x8005;&#x4FDD;&#x7559;&#xFF0C;&#x8F83;&#x5C0F;&#x7684;&#x4E00;&#x4E2A;&#x6D88;&#x5931;&#x2014;&#x2014;&#x8FD9;&#x53EB;&#x5916;&#x8FB9;&#x8DDD;&#x6298;&#x53E0;, &#x6211;&#x4EEC;&#x4E4B;&#x524D;&#x4E5F;&#x9047;&#x5230;&#x8FC7;&#x3002;</p>
<h5 class="mume-header" id="%E4%BB%8B%E7%BB%8D%E5%AE%9A%E4%BD%8D">&#x4ECB;&#x7ECD;&#x5B9A;&#x4F4D;</h5>

<p>&#x5B9A;&#x4F4D;&#x7684;&#x6574;&#x4E2A;&#x60F3;&#x6CD5;&#x662F;&#x5141;&#x8BB8;&#x6211;&#x4EEC;&#x8986;&#x76D6;&#x4E0A;&#x9762;&#x63CF;&#x8FF0;&#x7684;&#x57FA;&#x672C;&#x6587;&#x6863;&#x6D41;&#x884C;&#x4E3A;&#xFF0C;&#x4EE5;&#x4EA7;&#x751F;&#x6709;&#x8DA3;&#x7684;&#x6548;&#x679C;&#x3002;&#x5982;&#x679C;&#x4F60;&#x60F3;&#x7A0D;&#x5FAE;&#x6539;&#x53D8;&#x5E03;&#x5C40;&#x4E2D;&#x4E00;&#x4E9B;&#x76D2;&#x5B50;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x4F7F;&#x5B83;&#x4EEC;&#x7684;&#x9ED8;&#x8BA4;&#x5E03;&#x5C40;&#x6D41;&#x7A0B;&#x4F4D;&#x7F6E;&#x7A0D;&#x5FAE;&#x6709;&#x70B9;&#x53E4;&#x602A;&#xFF0C;&#x4E0D;&#x8212;&#x670D;&#x7684;&#x611F;&#x89C9;&#x5462;&#xFF1F;&#x5B9A;&#x4F4D;&#x662F;&#x4F60;&#x7684;&#x5DE5;&#x5177;&#x3002;&#x6216;&#x8005;&#xFF0C;&#x5982;&#x679C;&#x60A8;&#x60F3;&#x8981;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x6D6E;&#x52A8;&#x5728;&#x9875;&#x9762;&#x5176;&#x4ED6;&#x90E8;&#x5206;&#x9876;&#x90E8;&#x7684;UI&#x5143;&#x7D20;&#xFF0C;&#x5E76;&#x4E14;/&#x6216;&#x8005;&#x59CB;&#x7EC8;&#x505C;&#x7559;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x7A97;&#x53E3;&#x5185;&#x7684;&#x76F8;&#x540C;&#x4F4D;&#x7F6E;&#xFF0C;&#x65E0;&#x8BBA;&#x9875;&#x9762;&#x6EDA;&#x52A8;&#x591A;&#x5C11;&#xFF1F;&#x5B9A;&#x4F4D;&#x4F7F;&#x8FD9;&#x79CD;&#x5E03;&#x5C40;&#x5DE5;&#x4F5C;&#x6210;&#x4E3A;&#x53EF;&#x80FD;&#x3002;<br>
&#x6709;&#x8BB8;&#x591A;&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x5B9A;&#x4F4D;&#xFF0C;&#x60A8;&#x53EF;&#x4EE5;&#x5BF9;HTML&#x5143;&#x7D20;&#x751F;&#x6548;&#x3002;&#x8981;&#x4F7F;&#x67D0;&#x4E2A;&#x5143;&#x7D20;&#x4E0A;&#x7684;&#x7279;&#x5B9A;&#x7C7B;&#x578B;&#x7684;&#x5B9A;&#x4F4D;&#xFF0C;&#x6211;&#x4EEC;&#x4F7F;&#x7528;<code>position</code>&#x5C5E;&#x6027;&#x3002;</p>
<p>CSS position&#x5C5E;&#x6027;&#x7528;&#x4E8E;&#x6307;&#x5B9A;&#x4E00;&#x4E2A;&#x5143;&#x7D20;&#x5728;&#x6587;&#x6863;&#x4E2D;&#x7684;&#x5B9A;&#x4F4D;&#x65B9;&#x5F0F;&#x3002;top&#xFF0C;right&#xFF0C;bottom &#x548C; left &#x5C5E;&#x6027;&#x5219;&#x51B3;&#x5B9A;&#x4E86;&#x8BE5;&#x5143;&#x7D20;&#x7684;&#x6700;&#x7EC8;&#x4F4D;&#x7F6E;&#x3002;</p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position">position</a></p>
<ol>
<li>&#x9759;&#x6001;&#x5B9A;&#x4F4D;<br>
<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#%E9%9D%99%E6%80%81%E5%AE%9A%E4%BD%8D">&#x9759;&#x6001;&#x5B9A;&#x4F4D;</a><br>
&#x9759;&#x6001;&#x5B9A;&#x4F4D;&#x662F;&#x6BCF;&#x4E2A;&#x5143;&#x7D20;&#x83B7;&#x53D6;&#x7684;&#x9ED8;&#x8BA4;&#x503C;&#x2014;&#x2014;&#x5B83;&#x53EA;&#x662F;&#x610F;&#x5473;&#x7740;&#x201C;&#x5C06;&#x5143;&#x7D20;&#x653E;&#x5165;&#x5B83;&#x5728;&#x6587;&#x6863;&#x5E03;&#x5C40;&#x6D41;&#x4E2D;&#x7684;&#x6B63;&#x5E38;&#x4F4D;&#x7F6E; &#x2014;&#x2014;&#x8FD9;&#x91CC;&#x6CA1;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x522B;&#x7684;&#x3002;<br>
&#x8BE5;&#x5173;&#x952E;&#x5B57;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x4F7F;&#x7528;&#x6B63;&#x5E38;&#x7684;&#x5E03;&#x5C40;&#x884C;&#x4E3A;&#xFF0C;&#x5373;&#x5143;&#x7D20;&#x5728;&#x6587;&#x6863;&#x5E38;&#x89C4;&#x6D41;&#x4E2D;&#x5F53;&#x524D;&#x7684;&#x5E03;&#x5C40;&#x4F4D;&#x7F6E;&#x3002;&#x6B64;&#x65F6; top, right, bottom, left &#x548C; z-index &#x5C5E;&#x6027;&#x65E0;&#x6548;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css">     <span class="token selector"><span class="token class">.p1</span></span> <span class="token punctuation">{</span>
         <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
         <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightpink</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token selector"><span class="token class">.p2</span></span> <span class="token punctuation">{</span>
         <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
         <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">greenyellow</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token selector"><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
         <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
         <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightgreen</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
     <span class="token selector"><span class="token class">.p1</span><span class="token punctuation">,</span><span class="token class">.p2</span><span class="token punctuation">,</span><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
         <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span>
     <span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>static<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>paragraph1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> static<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> </span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>paragraph2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>paragraph3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="position/static.png" alt="static"></li>
<li>&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;<br>
<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D">&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;</a><br>
&#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x662F;&#x6211;&#x4EEC;&#x5C06;&#x8981;&#x770B;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x4F4D;&#x7F6E;&#x7C7B;&#x578B;&#x3002; &#x5B83;&#x4E0E;&#x9759;&#x6001;&#x5B9A;&#x4F4D;&#x975E;&#x5E38;&#x76F8;&#x4F3C;&#xFF0C;&#x5360;&#x636E;&#x5728;&#x6B63;&#x5E38;&#x7684;&#x6587;&#x6863;&#x6D41;&#x4E2D;&#xFF0C;&#x9664;&#x4E86;&#x4F60;&#x4ECD;&#x7136;&#x53EF;&#x4EE5;&#x4FEE;&#x6539;&#x5B83;&#x7684;&#x6700;&#x7EC8;&#x4F4D;&#x7F6E;&#xFF0C;&#x5305;&#x62EC;&#x8BA9;&#x5B83;&#x4E0E;&#x9875;&#x9762;&#x4E0A;&#x7684;&#x5176;&#x4ED6;&#x5143;&#x7D20;&#x91CD;&#x53E0;&#x3002;<br>
&#x90A3;&#x4E48;&#x5982;&#x4F55;&#x4FEE;&#x6539;&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#x5462;&#xFF1F; &#x60A8;&#x9700;&#x8981;&#x4F7F;&#x7528;top&#xFF0C;bottom&#xFF0C;left&#x548C;right&#x5C5E;&#x6027; &#xFF0C;&#x6211;&#x4EEC;&#x5C06;&#x5728;&#x4E0B;&#x4E00;&#x8282;&#x4E2D;&#x89E3;&#x91CA;&#x3002;<br>
&#x8BE5;&#x5173;&#x952E;&#x5B57;&#x4E0B;&#xFF0C;&#x5143;&#x7D20;&#x5148;&#x653E;&#x7F6E;&#x5728;&#x672A;&#x6DFB;&#x52A0;&#x5B9A;&#x4F4D;&#x65F6;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x518D;&#x5728;&#x4E0D;&#x6539;&#x53D8;&#x9875;&#x9762;&#x5E03;&#x5C40;&#x7684;&#x524D;&#x63D0;&#x4E0B;&#x8C03;&#x6574;&#x5143;&#x7D20;&#x4F4D;&#x7F6E;&#xFF08;&#x56E0;&#x6B64;&#x4F1A;&#x5728;&#x6B64;&#x5143;&#x7D20;&#x672A;&#x6DFB;&#x52A0;&#x5B9A;&#x4F4D;&#x65F6;&#x6240;&#x5728;&#x4F4D;&#x7F6E;&#x7559;&#x4E0B;&#x7A7A;&#x767D;&#xFF09;&#x3002;position:relative &#x5BF9; table-*-group, table-row, table-column, table-cell, table-caption &#x5143;&#x7D20;&#x65E0;&#x6548;&#x3002;
<h5><a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#introducing_top_bottom_left_and_right">&#x4ECB;&#x7ECD; top, bottom, left,  right</a></h5>
top, bottom, left, &#x548C; right &#x6765;&#x7CBE;&#x786E;&#x6307;&#x5B9A;&#x8981;&#x5C06;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x79FB;&#x52A8;&#x5230;&#x7684;&#x4F4D;&#x7F6E;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css">    <span class="token selector"><span class="token class">.p1</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightpink</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p2</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">greenyellow</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightgreen</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p1</span><span class="token punctuation">,</span><span class="token class">.p2</span><span class="token punctuation">,</span><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token id">#two</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>relative<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>paragraph1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>paragraph2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>paragraph3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D; --&gt;</span>
<span class="token comment">&lt;!-- &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x662F;&#x5728;&#x6587;&#x6863;&#x4E2D;&#x7684;&#x6B63;&#x5E38;&#x4F4D;&#x7F6E;&#x504F;&#x79FB;&#x7ED9;&#x5B9A;&#x7684;&#x503C;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x5F71;&#x54CD;&#x5176;&#x4ED6;&#x5143;&#x7D20;&#x7684;&#x504F;&#x79FB;&#x3002;&#x4E0B;&#x9762;&#x7684;&#x4F8B;&#x5B50;&#x4E2D;&#xFF0C;&#x6CE8;&#x610F;&#x672A;&#x5E94;&#x7528;&#x5B9A;&#x4F4D;&#x7684;&#x5176;&#x5B83;&#x5143;&#x7D20;&#x662F;&#x6309;&#x7167; &quot;Two&quot; &#x5728;&#x6B63;&#x5E38;&#x4F4D;&#x7F6E;&#x7684;&#x60C5;&#x51B5;&#x4E0B;&#x8FDB;&#x884C;&#x5E03;&#x5C40;&#x7684;&#x3002; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>one<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>two<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>three<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>four<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Four<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="position/relative.png" alt="relative"></li>
<li>&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;<br>
<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#absolute_positioning">&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;</a><br>
&#x5143;&#x7D20;&#x4F1A;&#x88AB;&#x79FB;&#x51FA;&#x6B63;&#x5E38;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x5E76;&#x4E0D;&#x4E3A;&#x5143;&#x7D20;&#x9884;&#x7559;&#x7A7A;&#x95F4;&#xFF0C;&#x901A;&#x8FC7;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x6700;&#x8FD1;&#x7684;&#x975E; static &#x5B9A;&#x4F4D;&#x7956;&#x5148;&#x5143;&#x7D20;&#x7684;&#x504F;&#x79FB;&#xFF0C;&#x6765;&#x786E;&#x5B9A;&#x5143;&#x7D20;&#x4F4D;&#x7F6E;&#x3002;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5916;&#x8FB9;&#x8DDD;&#xFF08;margins&#xFF09;&#xFF0C;&#x4E14;&#x4E0D;&#x4F1A;&#x4E0E;&#x5176;&#x4ED6;&#x8FB9;&#x8DDD;&#x5408;&#x5E76;&#x3002;<br>
&#x5143;&#x7D20;&#x4F1A;&#x88AB;&#x79FB;&#x51FA;&#x6B63;&#x5E38;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x5E76;&#x4E0D;&#x4E3A;&#x5143;&#x7D20;&#x9884;&#x7559;&#x7A7A;&#x95F4;&#xFF0C;&#x901A;&#x8FC7;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x6700;&#x8FD1;&#x7684;&#x975E; static &#x5B9A;&#x4F4D;&#x7956;&#x5148;&#x5143;&#x7D20;&#x7684;&#x504F;&#x79FB;&#xFF0C;&#x6765;&#x786E;&#x5B9A;&#x5143;&#x7D20;&#x4F4D;&#x7F6E;&#x3002;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;&#x5916;&#x8FB9;&#x8DDD;&#xFF08;margins&#xFF09;&#xFF0C;&#x4E14;&#x4E0D;&#x4F1A;&#x4E0E;&#x5176;&#x4ED6;&#x8FB9;&#x8DDD;&#x5408;&#x5E76;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css">    <span class="token selector"><span class="token class">.f1</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightpink</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">400</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.f2</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">greenyellow</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">250</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.f3</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightgreen</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.f1</span><span class="token punctuation">,</span><span class="token class">.f2</span><span class="token punctuation">,</span><span class="token class">.f3</span></span> <span class="token punctuation">{</span>
        <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">30</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
        <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token id">#three</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">620</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">forestgreen</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>absolute<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>f1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        paragraph1
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>f2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
            paragraph2
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>f3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> static<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
                paragraph3
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">gray</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
                    paragraph4
                    <span class="token comment">&lt;!-- &#x76F8;&#x5BF9;&#x4E8E;&#x7B2C;&#x4E00;&#x4E2A;&#x975E;static&#x7956;&#x5148;&#x5143;&#x7D20;&#x3002;&#x8FD9;&#x91CC;&#x6EE1;&#x8DB3;&#x6761;&#x4EF6;&#x7684;&#x7956;&#x5148;&#x5143;&#x7D20;&#x662F;paragraph2. --&gt;</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D; --&gt;</span>
<span class="token comment">&lt;!-- &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x5E76;&#x672A;&#x8131;&#x79BB;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x800C;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x5219;&#x8131;&#x79BB;&#x4E86;&#x6587;&#x6863;&#x6D41;&#x3002;&#x5728;&#x5E03;&#x7F6E;&#x6587;&#x6863;&#x6D41;&#x4E2D;&#x5176;&#x5B83;&#x5143;&#x7D20;&#x65F6;&#xFF0C;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x4E0D;&#x5360;&#x636E;&#x7A7A;&#x95F4;&#x3002;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x6700;&#x8FD1;&#x7684;&#x975E; static &#x7956;&#x5148;&#x5143;&#x7D20;&#x5B9A;&#x4F4D;&#x3002;&#x5F53;&#x8FD9;&#x6837;&#x7684;&#x7956;&#x5148;&#x5143;&#x7D20;&#x4E0D;&#x5B58;&#x5728;&#x65F6;&#xFF0C;&#x5219;&#x76F8;&#x5BF9;&#x4E8E;ICB&#xFF08;inital container block, &#x521D;&#x59CB;&#x5305;&#x542B;&#x5757;&#xFF09;&#x3002;&#x4F8B;&#x5B50;&#x4E0D;&#x4E25;&#x8C28;&#xFF0C;&#x5F85;&#x4FEE;&#x6B63;&#x4E0B;&#x9762;&#x7684;&#x793A;&#x4F8B;&#x4E2D;&#xFF0C;&quot;Three&quot; &#x5143;&#x7D20;&#x4E0D;&#x5B58;&#x5728;&#x5E94;&#x7528;&#x4E86;&#x5B9A;&#x4F4D;&#x7684;&#x7956;&#x5148;&#x5143;&#x7D20;&#xFF0C;&#x56E0;&#x6B64;&#x8BE5;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x7D27;&#x90BB;&#x7684;&#x7956;&#x5148;&#xFF08;iframe &#x4E2D;&#x7684; &lt;body&gt; &#x5143;&#x7D20;&#xFF09;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x3002; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">px</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>one<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>two<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Two<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>three<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Three<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>four<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Four<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="position/absolute.png" alt="absolute"></li>
<li>&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;<br>
<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#fixed_positioning">&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;</a><br>
&#x8FD8;&#x6709;&#x4E00;&#x79CD;&#x7C7B;&#x578B;&#x7684;&#x5B9A;&#x4F4D;&#x8986;&#x76D6;&#x2014;&#x2014;fixed&#x3002; &#x8FD9;&#x4E0E;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5DE5;&#x4F5C;&#x65B9;&#x5F0F;&#x5B8C;&#x5168;&#x76F8;&#x540C;&#xFF0C;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x4E3B;&#x8981;&#x533A;&#x522B;&#xFF1A;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x56FA;&#x5B9A;&#x5143;&#x7D20;&#x662F;&#x76F8;&#x5BF9;&#x4E8E;  &#x5143;&#x7D20;&#x6216;&#x5176;&#x6700;&#x8FD1;&#x7684;&#x5B9A;&#x4F4D;&#x7956;&#x5148;&#xFF0C;&#x800C;&#x56FA;&#x5B9A;&#x5B9A;&#x4F4D;&#x56FA;&#x5B9A;&#x5143;&#x7D20;&#x5219;&#x662F;&#x76F8;&#x5BF9;&#x4E8E;&#x6D4F;&#x89C8;&#x5668;&#x89C6;&#x53E3;&#x672C;&#x8EAB;&#x3002; &#x8FD9;&#x610F;&#x5473;&#x7740;&#x60A8;&#x53EF;&#x4EE5;&#x521B;&#x5EFA;&#x56FA;&#x5B9A;&#x7684;&#x6709;&#x7528;&#x7684;UI&#x9879;&#x76EE;&#xFF0C;&#x5982;&#x6301;&#x4E45;&#x5BFC;&#x822A;&#x83DC;&#x5355;&#x3002;<br>
&#x5143;&#x7D20;&#x4F1A;&#x88AB;&#x79FB;&#x51FA;&#x6B63;&#x5E38;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x5E76;&#x4E0D;&#x4E3A;&#x5143;&#x7D20;&#x9884;&#x7559;&#x7A7A;&#x95F4;&#xFF0C;&#x800C;&#x662F;&#x901A;&#x8FC7;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x5C4F;&#x5E55;&#x89C6;&#x53E3;&#xFF08;viewport&#xFF09;&#x7684;&#x4F4D;&#x7F6E;&#x6765;&#x6307;&#x5B9A;&#x5143;&#x7D20;&#x4F4D;&#x7F6E;&#x3002;&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#x5728;&#x5C4F;&#x5E55;&#x6EDA;&#x52A8;&#x65F6;&#x4E0D;&#x4F1A;&#x6539;&#x53D8;&#x3002;&#x6253;&#x5370;&#x65F6;&#xFF0C;&#x5143;&#x7D20;&#x4F1A;&#x51FA;&#x73B0;&#x5728;&#x7684;&#x6BCF;&#x9875;&#x7684;&#x56FA;&#x5B9A;&#x4F4D;&#x7F6E;&#x3002;fixed &#x5C5E;&#x6027;&#x4F1A;&#x521B;&#x5EFA;&#x65B0;&#x7684;&#x5C42;&#x53E0;&#x4E0A;&#x4E0B;&#x6587;&#x3002;&#x5F53;&#x5143;&#x7D20;&#x7956;&#x5148;&#x7684; transform, perspective &#x6216; filter &#x5C5E;&#x6027;&#x975E; none &#x65F6;&#xFF0C;&#x5BB9;&#x5668;&#x7531;&#x89C6;&#x53E3;&#x6539;&#x4E3A;&#x8BE5;&#x7956;&#x5148;&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css">    <span class="token selector"><span class="token class">.p1</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightpink</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p2</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">greenyellow</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightgreen</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p1</span><span class="token punctuation">,</span><span class="token class">.p2</span><span class="token punctuation">,</span><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">50</span><span class="token unit">%</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.box</span></span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token id">#one</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.outer</span></span> <span class="token punctuation">{</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">500</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">300</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">overflow</span><span class="token punctuation">:</span> scroll<span class="token punctuation">;</span>
        <span class="token property">padding-left</span><span class="token punctuation">:</span> <span class="token number">150</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>fixed<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>paragraph1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">10</span><span class="token unit">px</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>paragraph2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>paragraph3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- &#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D; --&gt;</span>
<span class="token comment">&lt;!-- &#x76F8;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x5E76;&#x672A;&#x8131;&#x79BB;&#x6587;&#x6863;&#x6D41;&#xFF0C;&#x800C;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x5219;&#x8131;&#x79BB;&#x4E86;&#x6587;&#x6863;&#x6D41;&#x3002;&#x5728;&#x5E03;&#x7F6E;&#x6587;&#x6863;&#x6D41;&#x4E2D;&#x5176;&#x5B83;&#x5143;&#x7D20;&#x65F6;&#xFF0C;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x4E0D;&#x5360;&#x636E;&#x7A7A;&#x95F4;&#x3002;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x6700;&#x8FD1;&#x7684;&#x975E; static &#x7956;&#x5148;&#x5143;&#x7D20;&#x5B9A;&#x4F4D;&#x3002;&#x5F53;&#x8FD9;&#x6837;&#x7684;&#x7956;&#x5148;&#x5143;&#x7D20;&#x4E0D;&#x5B58;&#x5728;&#x65F6;&#xFF0C;&#x5219;&#x76F8;&#x5BF9;&#x4E8E;ICB&#xFF08;inital container block, &#x521D;&#x59CB;&#x5305;&#x542B;&#x5757;&#xFF09;&#x3002;&#x4F8B;&#x5B50;&#x4E0D;&#x4E25;&#x8C28;&#xFF0C;&#x5F85;&#x4FEE;&#x6B63;&#x4E0B;&#x9762;&#x7684;&#x793A;&#x4F8B;&#x4E2D;&#xFF0C;&quot;Three&quot; &#x5143;&#x7D20;&#x4E0D;&#x5B58;&#x5728;&#x5E94;&#x7528;&#x4E86;&#x5B9A;&#x4F4D;&#x7684;&#x7956;&#x5148;&#x5143;&#x7D20;&#xFF0C;&#x56E0;&#x6B64;&#x8BE5;&#x5143;&#x7D20;&#x76F8;&#x5BF9;&#x4E8E;&#x7D27;&#x90BB;&#x7684;&#x7956;&#x5148;&#xFF08;iframe &#x4E2D;&#x7684; &lt;body&gt; &#x5143;&#x7D20;&#xFF09;&#x7EDD;&#x5BF9;&#x5B9A;&#x4F4D;&#x3002; --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>outer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
        Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
        Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra
        dictum vel sit amet mi.
        Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam,
        congue porttitor tortor.
        Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
        Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et
        tellus.
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
        Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
        Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra
        dictum vel sit amet mi.
        Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam,
        congue porttitor tortor.
        Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
        Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et
        tellus.
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>one<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>One<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="position/fixed.png" alt="fixed"></li>
<li>z-index<br>
<a href="https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Positioning#introducing_z-index">z-index</a>
<h5>&#x4ECB;&#x7ECD; z-index</h5>
&#x60A8;&#x53EF;&#x4EE5;&#x66F4;&#x6539;&#x5806;&#x53E0;&#x987A;&#x5E8F;&#x5417;&#xFF1F;&#x662F;&#x7684;&#xFF0C;&#x60A8;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;z-index&#x5C5E;&#x6027;&#x3002; &#x201C;z-index&#x201D;&#x662F;&#x5BF9;z&#x8F74;&#x7684;&#x53C2;&#x8003;&#x3002;<br>
&#x7F51;&#x9875;&#x4E5F;&#x6709;&#x4E00;&#x4E2A;z&#x8F74;&#xFF1A;&#x4E00;&#x6761;&#x4ECE;&#x5C4F;&#x5E55;&#x8868;&#x9762;&#x5230;&#x4F60;&#x7684;&#x8138;&#xFF08;&#x6216;&#x8005;&#x5728;&#x5C4F;&#x5E55;&#x524D;&#x9762;&#x4F60;&#x559C;&#x6B22;&#x7684;&#x4EFB;&#x4F55;&#x5176;&#x4ED6;&#x4E1C;&#x897F;&#xFF09;&#x7684;&#x865A;&#x7EBF;&#x3002;z-index &#x503C;&#x5F71;&#x54CD;&#x5B9A;&#x4F4D;&#x5143;&#x7D20;&#x4F4D;&#x4E8E;&#x8BE5;&#x8F74;&#x4E0A;&#x7684;&#x4F4D;&#x7F6E;&#xFF1B;&#x6B63;&#x503C;&#x5C06;&#x5B83;&#x4EEC;&#x79FB;&#x52A8;&#x5230;&#x5806;&#x6808;&#x4E0A;&#x65B9;&#xFF0C;&#x8D1F;&#x503C;&#x5C06;&#x5B83;&#x4EEC;&#x5411;&#x4E0B;&#x79FB;&#x52A8;&#x5230;&#x5806;&#x6808;&#x4E2D;&#x3002;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5B9A;&#x4F4D;&#x7684;&#x5143;&#x7D20;&#x90FD;&#x5177;&#x6709;z-index&#x4E3A;auto&#xFF0C;&#x5B9E;&#x9645;&#x4E0A;&#x4E3A;0&#x3002;<pre data-role="codeBlock" data-info="css" class="language-css">    <span class="token selector"><span class="token class">.container</span></span> <span class="token punctuation">{</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">gray</span><span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">200</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">font-weight</span><span class="token punctuation">:</span> bolder<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p1</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightpink</span><span class="token punctuation">;</span>
        <span class="token comment">/* width: 160px; */</span>
        <span class="token comment">/* height: 160px; */</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p2</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">lightgreen</span><span class="token punctuation">;</span>
        <span class="token comment">/* width: 120px; */</span>
        <span class="token comment">/* height: 120px; */</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">40</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.p3</span></span> <span class="token punctuation">{</span>
        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">green</span><span class="token punctuation">;</span>
        <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token color">greenyellow</span><span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token selector"><span class="token class">.wrapper</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.dashed-box</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
        <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token property">border</span><span class="token punctuation">:</span> dashed<span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">8</span><span class="token unit">em</span><span class="token punctuation">;</span>
        <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token unit">em</span><span class="token punctuation">;</span>
        <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">em</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.gold-box</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">;</span>
        <span class="token comment">/* put .gold-box above .green-box and .dashed-box */</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">gold</span><span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span><span class="token unit">%</span><span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">60</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">em</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector"><span class="token class">.green-box</span></span> <span class="token punctuation">{</span>
        <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
        <span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span>
        <span class="token comment">/* put .green-box above .dashed-box */</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">lightgreen</span><span class="token punctuation">;</span>
        <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">%</span><span class="token punctuation">;</span>
        <span class="token property">left</span><span class="token punctuation">:</span> <span class="token number">65</span><span class="token unit">%</span><span class="token punctuation">;</span>
        <span class="token property">top</span><span class="token punctuation">:</span> <span class="token number">-25</span><span class="token unit">px</span><span class="token punctuation">;</span>
        <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">7</span><span class="token unit">em</span><span class="token punctuation">;</span>
        <span class="token property">opacity</span><span class="token punctuation">:</span> <span class="token number">0.9</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</pre><pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>z-index<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p1<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
        z-index: 1
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p2<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
        z-index: 2
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>p3<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">z-index</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
        z-index: 3
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>wrapper<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dashed-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Dashed box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>gold-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Gold box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>green-box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Green box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</pre><img src="position/z-index.png" alt="z-index"></li>
</ol>

      </div>
      
      
    
    
    
    
    
    
    
    
  
    </body></html>